<HTML xmlns:th="http://www.thymeleaf.org">
<HEAD>
    <TITLE>華信商会(株) 販売管理業務システム</TITLE>
    <LINK th:href="@{/css/financials.css}" rel="stylesheet" type="text/css">
    <META http-equiv="Content-Type" content="text/HTML; charset=utf-8">
    <script language="JavaScript" th:src="@{/js/Common.js}"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <STYLE type="text/css">
        <!--
        BODY {
            background-color: #F8F9FB;
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
        }

        .style13 {
            color: #FFFFFF;
            font-weight: bold;
        }
        .style28 {
            font-family: "ＭＳ ゴシック";
            font-size: 12px;
        }
        /* 非活性メニュー共通スタイル */
        .disabled {
            pointer-events: none;
            opacity: 0.5;
            cursor: not-allowed;
        }

        .disabled a {
            pointer-events: none;
        }
    </STYLE>
    <script language="JavaScript">

        let tempCart = [];

        function addToCart() {

            const codeSelect = document.getElementById("s_code");
            const qtyInput = document.getElementById("u_suuryou1");
            const selectedCode = codeSelect.value;
            const inputQty = parseInt(qtyInput.value.trim());

            if (isNaN(inputQty) || inputQty <= 0) {
                alert("売上数量を正しく入力してください（正数を入力）");
                return;
            }

            const selectedOption = codeSelect.options[codeSelect.selectedIndex];
            const product = {
                productCode: selectedOption.getAttribute("data-productCode"),
                name: selectedOption.getAttribute("data-name"),
                price: selectedOption.getAttribute("data-price"),
                unit: selectedOption.getAttribute("data-unit"),
                stock: selectedOption.getAttribute("data-stock"),
                qty: inputQty
            };


            const existingIndex = tempCart.findIndex(item => item.productCode  === selectedCode);
            if (existingIndex > -1) {
                tempCart[existingIndex].qty = inputQty;
            } else {
                tempCart.push(product);
            }

            updateCartTable();

            qtyInput.value = "1";
        }


        function updateCartTable() {
            const cartBody = document.getElementById("cartBody");
            cartBody.innerHTML = "";

            tempCart.forEach((item, index) => {
                const row = document.createElement("tr");
                row.innerHTML = `
                <TD NOWRAP ALIGN="center" width="6%">${index + 1}</TD>
                <TD NOWRAP ALIGN="center" width="12%">${item.productCode}</TD>
                <TD NOWRAP ALIGN="left" width="20%">${item.name}</TD>
                <TD NOWRAP ALIGN="right" width="8%">${item.price}</TD>
                <TD NOWRAP ALIGN="center" width="6%">${item.unit}</TD>
                <TD NOWRAP ALIGN="right" width="9%">${item.stock}</TD>
                <TD NOWRAP ALIGN="right" width="10%">${item.qty}</TD>
                <TD NOWRAP ALIGN="center" width="6%"><input type="checkbox" checked name="selectedItems" value="${item.productCode}"></TD>
                <TD NOWRAP ALIGN="center" width="13%">
                <input type="button" value="削除" onclick="removeFromCart(${index})" style="font-size:12px;padding:2px 5px;">
            </TD>
            `;
                cartBody.appendChild(row);
            });
            const renamedCart = tempCart.map(item => ({
                productCode: item.code,   // 改名
                productName: item.name,
                price: item.price,
                unit: item.unit,
                stock: item.stock,
                qty: item.qty
            }));
            document.getElementById("cartData").value = JSON.stringify(renamedCart);

        }

        function removeFromCart(index) {
            tempCart.splice(index, 1);
            updateCartTable();
        }

        function clearCart() {
            tempCart = [];
            updateCartTable();
        }

        window.onload = function () {
            updateCartTable();
        };

        $(document).ready(function (){
            $("form[name='juchuuForm']").submit(function (){
                if (tempCart.length === 0){
                    alert("商品を追加してください")
                    return false;
                }
                const cartJson = JSON.stringify(tempCart);
                $("#cartData").val(cartJson);

                return true;
            });
        });
    </script>
</HEAD>
<BODY onLoad="goforit(),onLoad()">
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
    <TR>
        <TD height="55" colspan="2">
            <TABLE width=100% height="56" border=0 cellPadding=0 cellSpacing=0>
                <TBODY>
                <TR bordercolor="0">
                    <TD height="49" bgColor=#666666>
                        <TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
                            <TBODY>
                            <TR bordercolor="0">
                                <TD><IMG th:src="@{/img/header_logo_rt.gif}" width=1 border=0><IMG
                                        height=1 alt="Skip to page content"
                                        th:src="@{/img/sp.gif}" width=1
                                        border=0></TD>
                                <TD><IMG th:src="@{/img/header_logo.gif}" width="185" height="49" border="0"></TD>
                                <TD><IMG height=49 alt=""
                                         th:src="@{/img/header_logo_rt.gif}"
                                         width=105 border=0></TD>
                                <TD><IMG
                                        height=49 alt="" th:src="@{/img/header_title.gif}"
                                        width=329 border=0></TD>
                            </TR>
                            </TBODY>
                        </TABLE>
                    </TD>
                    <TD align=right bgColor=#666666>&nbsp;

                    </TD>
                </TR>
                <TR align="right">
                    <TD colSpan=3 bgColor=#000000>
                        <IMG height=5 alt="" th:src="@{/img/sp.gif}">
                        <script type="text/javascript" src="js/time.js"
                                language="JavaScript"></script>
                        <span id="clock"></span>
                    </TD>
                </TR>
                </TBODY>
            </TABLE>
        </TD>
    </TR>
    <TR>
        <TD width="152" height="100%" rowspan="2" valign="top"
            bgcolor="#FFFFFF">
            <TABLE width="152" height="501" border="0" cellpadding="0" cellspacing="0">
                <TR>
                    <script type="text/javascript" src="/js/menu.js" language="JavaScript"></script>

                    <DIV class=main id=main5 onclick=expandIt(5)>
                        <TD width="152" height="285" valign="top" bgcolor="#FFFFFF"
                            STYLE="border-right: 1px solid rgb(204, 204, 204);">
                            <IMG height=11 alt="" src="/img/nav_divider.gif" width=150>
                            <DIV class=main id=main1 onClick=expandIt(1)
                                 th:classappend="${session.loginDeptName} != '営業課' ? ' disabled' : ''">
                                <span class="titlefont">受注管理</span>
                                <DIV class=sub id=sub1 STYLE="display:none"
                                     th:classappend="${session.loginDeptName} != '営業課' ? ' disabled' : ''">
                                    <A th:if="${session.loginDeptName} == '営業課'" href="@{'/PR10101'}">受注入力<BR>
                                    </A>
                                    <A th:unless="${session.loginDeptName} == '営業課'" class="disabled"
                                       href="javascript:void(0)">受注入力<BR> </A>
                                    <A th:if="${session.loginDeptName} == '営業課'" th:href="@{/PR10201}">商品別出庫表作成<BR>
                                    </A>
                                    <A th:unless="${session.loginDeptName} == '営業課'" class="disabled"
                                       href="javascript:void(0)">商品別出庫表作成<BR> </A>

                                    <span class="titlefont">月報作成<IMG
                                            src="/img/arrow_pagenext2.gif"> </span>
                                    <BR>
                                    <IMG src="/img/nav_arrow.gif">
                                    <A th:if="${session.loginDeptName} == '営業課'" href="PR10301.HTML">顧客別受注実績月報作成<BR>
                                    </A>
                                    <A th:unless="${session.loginDeptName} == '営業課'" class="disabled"
                                       href="javascript:void(0)">顧客別受注実績月報作成<BR> </A>
                                    <IMG src="/img/nav_arrow.gif">
                                    <A th:if="${session.loginDeptName} == '営業課'" th:href="@{/PR10401}">商品別受注実績月報作成<BR>
                                    </A>
                                    <A th:unless="${session.loginDeptName} == '営業課'" class="disabled"
                                       href="javascript:void(0)">商品別受注実績月報作成<BR> </A>
                                    <A th:if="${session.loginDeptName} == '営業課'"
                                       th:href="@{/PR10501}">在庫情報確認</A>
                                    <A th:unless="${session.loginDeptName} == '営業課'" class="disabled"
                                       href="javascript:void(0)">在庫情報確認</A>
                                </DIV>
                                <IMG height=11 alt="" src="/img/nav_divider.gif" width=150>
                            </DIV>
                            <DIV class=main id=main2 onClick=expandIt(2)
                                 th:classappend="${session.loginDeptName} != '経理課' ? ' disabled' : ''">
                                <span class="titlefont">売掛管理</span>
                                <DIV class=sub id=sub2 STYLE="display:none"
                                     th:classappend="${session.loginDeptName} != '経理課' ? ' disabled' : ''">
                                    <A th:if="${session.loginDeptName} == '経理課'" th:href="@{/PR20101}">売掛登録<BR>
                                    </A>
                                    <A th:unless="${session.loginDeptName} == '経理課'" class="disabled"
                                       href="javascript:void(0)">売掛登録<BR> </A>
                                    <A th:if="${session.loginDeptName} == '経理課'" th:href="@{/PR20201}">代金請求<BR>
                                    </A>
                                    <A th:unless="${session.loginDeptName} == '経理課'" class="disabled"
                                       href="javascript:void(0)">代金請求<BR> </A>
                                    <A th:if="${session.loginDeptName} == '経理課'" th:href="@{/PR20301}">入金登録</A>
                                    <A th:unless="${session.loginDeptName} == '経理課'" class="disabled"
                                       href="javascript:void(0)">入金登録</A>
                                </DIV>
                                <IMG height=11 alt="" src="/img/nav_divider.gif" width=150>
                            </DIV>
                            <DIV class=main id=main3 onClick=expandIt(3)
                                 th:classappend="${session.loginDeptName} != '倉庫課' ? ' disabled' : ''">
                                <span class="titlefont">発注管理</span>
                                <DIV class=sub id=sub3 STYLE="display:none"
                                     th:classappend="${session.loginDeptName} != '倉庫課' ? ' disabled' : ''">
                                    <A th:if="${session.loginDeptName} == '倉庫課'" th:href="@{/PR30101}">発注書作成<BR>
                                    </A>
                                    <A th:unless="${session.loginDeptName} == '倉庫課'" class="disabled"
                                       href="javascript:void(0)">発注書作成<BR> </A>
                                    <A th:if="${session.loginDeptName} == '倉庫課'" th:href="@{/PR30201}">検品入庫</A>
                                    <A th:unless="${session.loginDeptName} == '倉庫課'" class="disabled"
                                       href="javascript:void(0)">検品入庫</A>
                                </DIV>
                                <IMG height=11 alt="" src="/img/nav_divider.gif" width=150>
                            </DIV>
                            <DIV class=main id=main4 onClick=expandIt(4)
                                 th:classappend="${session.loginDeptName} != '経理課' ? ' disabled' : ''">
                                <span class="titlefont">買掛管理</span>
                                <DIV class=sub id=sub4 STYLE="display:none"
                                     th:classappend="${session.loginDeptName} != '経理課' ? ' disabled' : ''">
                                    <A th:if="${session.loginDeptName} == '経理課'" href="PR40101.HTML">買掛登録<BR>
                                    </A>
                                    <A th:unless="${session.loginDeptName} == '経理課'" class="disabled"
                                       href="javascript:void(0)">買掛登録<BR> </A>
                                    <A th:if="${session.loginDeptName} == '経理課'" href="PR40201.HTML">支払伝票作成</A>
                                    <A th:unless="${session.loginDeptName} == '経理課'" class="disabled"
                                       href="javascript:void(0)">支払伝票作成</A>
                                    <BR>
                                    <A th:if="${session.loginDeptName} == '経理課'" href="PR40301.HTML">支払額登録</A>
                                    <A th:unless="${session.loginDeptName} == '経理課'" class="disabled"
                                       href="javascript:void(0)">支払額登録</A>
                                </DIV>
                                <IMG height=11 alt="" src="/img/nav_divider.gif" width=150>
                            </DIV>
                            <DIV class=main id=main5 onClick=expandIt(5) th:classappend="' disabled'"><span
                                    class="titlefont">情報管理</span>
                                <DIV class=sub id=sub5 style="display:none" th:classappend="' disabled'"><A
                                        href="PR50101.HTML">顧客情報管理<br>
                                </A><a href="PR50201.HTML">商品情報管理</A><br>
                                    <A href="PR50301.HTML">仕入先情報管理</A><br>
                                    <A href="PR50401.HTML">担当者情報管理</A><br>
                                    <A href="/HTML/PR50501.HTML">部門情報管理</A>
                                </DIV>

                </TR>
                <TR>
                    <TD height="48" valign="top" bordercolor="0">
                        <img src="/img/b.jpg" width="152" height="216" border="0" align="top">
                </TR>
            </TABLE>
        </TD>
        <TD height="400" align="left" valign="top">
            <TABLE>
                <TR>
                    <TD width="700">
                        <DIV class="header3">
                            <BR>
                        </DIV>
                        <DIV class="bfont" align="left">
                            ログイン：張毅
                        </DIV>
                        <BR>
                        <DIV class="bfont" align="left">
                            受注管理－＞受注入力
                        </DIV>
                    </TD>
                    <TD width="200">
                        <DIV class="bfont" align="right">
                            <span class="titlefont"><A href="LOGON.HTML">首頁</A> </span><span
                                class="titlefont">｜</span>
                            <span class="titlefont"><A href="INDEX.HTML">退出</A> </span>
                        </DIV>
                    </TD>
                </TR>
            </TABLE>
            <HR>
            <FORM name="juchuuForm" method="POST" action="/saveOrder">
                <TABLE>
                    <TR>
                        <TD width="50">
                        </TD>
                        <TD>
                            <TABLE>
                                <TR>
                                    <TD width="867">
                                        <TABLE>
                                            <TR align="left">
                                                <TH width="72" nowrap>
                                                    <span class="datafont">顧客コード</span>
                                                </TH>
                                                <TD nowrap>
                                                    <select name="kokyaku_code">
                                                        <option th:each="customer : ${customerList}"
                                                                th:value="${customer.getM00101()}"
                                                                th:text="${customer.getM00101()}">
                                                        </option>
                                                    </select>
                                                </TD>
                                            </TR>
                                            <TR align="left">
                                                <TD nowrap class="datafont">
                                                    納入希望日
                                                </TD>
                                                <TD nowrap>
                                                    <select name="nengou_code" mutilply>
                                                        <option value="1" selected>
                                                            平成
                                                        </option>
                                                        <option value="2">
                                                            令和
                                                        </option>
                                                    </select>
                                                    <select name="kotosi" mutilply>
                                                        <option value="0"></option>
                                                        <option value="2025">
                                                            2025
                                                        </option>
                                                        <option value="2024">
                                                            2024
                                                        </option>
                                                        <option value="2023">
                                                            2023
                                                        </option>
                                                        <option value="2022">
                                                            2022
                                                        </option>
                                                        <option value="2021">
                                                            2021
                                                        </option>
                                                        <option value="2020">
                                                            2020
                                                        </option>
                                                        <option value="2019">
                                                            2019
                                                        </option>
                                                        <option value="2018">
                                                            2018
                                                        </option>
                                                        <option value="2017">
                                                            2017
                                                        </option>
                                                        <option value="2016">
                                                            2016
                                                        </option>
                                                    </select>
                                                    &nbsp;
                                                    <span class="datafont">年</span>
                                                    <select name="gathu" mutilply>
                                                        <option value="0"></option>
                                                        <option value="1">
                                                            01
                                                        </option>
                                                        <option value="2">
                                                            02
                                                        </option>
                                                        <option value="3">
                                                            03
                                                        </option>
                                                        <option value="4">
                                                            04
                                                        </option>
                                                        <option value="5">
                                                            05
                                                        </option>
                                                        <option value="6">
                                                            06
                                                        </option>
                                                        <option value="7">
                                                            07
                                                        </option>
                                                        <option value="8">
                                                            08
                                                        </option>
                                                        <option value="9">
                                                            09
                                                        </option>
                                                        <option value="10">
                                                            10
                                                        </option>
                                                        <option value="11">
                                                            11
                                                        </option>
                                                        <option value="12">
                                                            12
                                                        </option>
                                                    </select>
                                                    &nbsp;
                                                    <span class="datafont">月</span>
                                                    <select name="niti" mutilply>
                                                        <option value="0"></option>
                                                        <option value="1">
                                                            01
                                                        </option>
                                                        <option value="2">
                                                            02
                                                        </option>
                                                        <option value="3">
                                                            03
                                                        </option>
                                                        <option value="4">
                                                            04
                                                        </option>
                                                        <option value="5">
                                                            05
                                                        </option>
                                                        <option value="6">
                                                            06
                                                        </option>
                                                        <option value="7">
                                                            07
                                                        </option>
                                                        <option value="8">
                                                            08
                                                        </option>
                                                        <option value="9">
                                                            09
                                                        </option>
                                                        <option value="10">
                                                            10
                                                        </option>
                                                        <option value="11">
                                                            11
                                                        </option>
                                                        <option value="12">
                                                            12
                                                        </option>
                                                        <option value="13">
                                                            13
                                                        </option>
                                                        <option value="14">
                                                            14
                                                        </option>
                                                        <option value="15">
                                                            15
                                                        </option>
                                                        <option value="16">
                                                            16
                                                        </option>
                                                        <option value="17">
                                                            17
                                                        </option>
                                                        <option value="18">
                                                            18
                                                        </option>
                                                        <option value="19">
                                                            19
                                                        </option>
                                                        <option value="20">
                                                            20
                                                        </option>
                                                        <option value="21">
                                                            21
                                                        </option>
                                                        <option value="22">
                                                            22
                                                        </option>
                                                        <option value="23">
                                                            23
                                                        </option>
                                                        <option value="24">
                                                            24
                                                        </option>
                                                        <option value="25">
                                                            25
                                                        </option>
                                                        <option value="26">
                                                            26
                                                        </option>
                                                        <option value="27">
                                                            27
                                                        </option>
                                                        <option value="28">
                                                            28
                                                        </option>
                                                        <option value="29">
                                                            29
                                                        </option>
                                                        <option value="30">
                                                            30
                                                        </option>
                                                        <option value="31">
                                                            31
                                                        </option>
                                                    </select>
                                                    &nbsp;
                                                    <span class="datafont">日</span>
                                                    <span class="datafont">（省略時翌日）</span>
                                                </TD>
                                            </TR>
                                            <TR align="left">
                                                <TD width="72" nowrap class="datafont">
                                                    納入先
                                                </TD>
                                                <TD nowrap>
                                                    <input type="text" name="n_saki" maxlength="40" size="60"
                                                           value="">
                                                    <span class="datafont">（省略時現住所）</span>
                                                </TD>
                                            </TR>
                                        </TABLE>
                                    </TD>
                                </TR>
                                <TR>
                                    <TD>
                                        <TABLE width=250>
                                            <TR>
                                                <TD class="ItemTop" nowrap>
                                                    <FIELDSET>
                                                        <legend class="bfont">受注商品</legend>
                                                        <TABLE>
                                                            <TR align="left">
                                                                <TD width="72" class="tableHeader_staffCol" nowrap>
                                                                    <span class="datafont">商品コード</span>
                                                                </TD>
                                                                <TD class="tableBody_staffCol" width="150" nowrap>
                                                                    <select name="s_code" id="s_code">
                                                                        <option th:each="product : ${productList}"
                                                                                th:text="${product.M00201}"
                                                                                th:data-productCode="${product.M00201}"
                                                                                th:data-name="${product.M00202}"
                                                                                th:data-price="${product.M00203}"
                                                                                th:data-unit="${product.M00204}"
                                                                                th:data-stock="${product.M00207}"></option>
                                                                    </select>
                                                                </TD>
                                                            </TR>
                                                            <TR align="left">
                                                                <TD nowrap class="tableHeader_staffCol">
                                                                    <span class="datafont">売上数量</span>
                                                                </TD>
                                                                <TD class="tableBody_staffCol" width="150" nowrap>
                                                                    <input type="text" name="u_suuryou1" id="u_suuryou1" maxlength="4" size="5"
                                                                           value="1">
                                                                </TD>
                                                                <TD class="tableBody_staffCol" nowrap>
                                                                    <input type="button" size="15" value="追加" onclick="addToCart()">
                                                                </TD>
                                                            </TR>
                                                        </TABLE>
                                                    </FIELDSET>
                                                </TD>
                                            </TR>
                                        </TABLE>
                                    </TD>
                                </TR>

                                <TR>
                                    <TD>
                                        <div id="cartContainer">
                                            <table border="1" width="800" style="border-collapse: collapse;">
                                                <caption><B>受注商品明細</B></caption>
                                                <thead bgcolor="darkkhaki">
                                                <tr>
                                                    <th width="6%" align="center"><span class="datafont">項番</span></th>
                                                    <th width="12%"><span class="datafont">商品コード</span></th>
                                                    <th width="20%"><span class="datafont">商品名</span></th>
                                                    <th width="8%" align="right"><span class="datafont">単価</span></th>
                                                    <th width="6%"><span class="datafont">単位</span></th>
                                                    <th width="9%" align="right"><span class="datafont">在庫数</span></th>
                                                    <th width="10%" align="right"><span class="datafont">売上数量</span></th>
                                                    <th width="6%" align="center"><span class="datafont">選択</span></th>
                                                    <th width="13%" align="center"><span class="datafont">操作</span></th>
                                                </tr>
                                                </thead>
                                                <tbody bgcolor="lightcyan" id="cartBody">
                                                </tbody>
                                            </table>
                                        </div>
                                    </TD>
                                </TR>
                                <TR>
                                    <TD>
                                        <DIV id="changePage3">
                                            <TABLE width="60%" border="0" cellpadding="5">
                                                <TR align="center">
                                                    <TD width="50%">
                                                    </TD>
                                                    <TD width="10%">
                                                        <input type="button" name="clear" value="クリア"
                                                               onclick="clearCart()">
                                                    </TD>
                                                    <TD width="40%">
                                                        <input type="submit" id="goToPage" name="submit" value="発行">
                                                    </TD>
                                                </TR>
                                            </TABLE>
                                    </TD>
                                </TR>
                            </TABLE>
                        </TD>
                    </TR>
                </TABLE>
                <input type="hidden" name="cartData" id="cartData">
            </FORM>
        </TD>
    </TR>
    <TR>
        <TD align="center" valign="bottom">
            <TABLE width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
                <TR>
                    <TD align="right" bgcolor="#F8F9FB"><DIV align="left"><IMG th:src="@{/img/eds.jpg}" width="404" height="60"></DIV></TD>
                    <TD align="right" bgcolor="#F8F9FB"><IMG th:src="@{/img/sTRuts-power.gif}" width="95" height="37"></TD>
                </TR>
            </TABLE>
        </TD>
    </TR>
    <TR>
        <TD height="10" colspan="2">
            <TABLE width=100% border=0 cellpadding=0 cellspacing=0
                   bgcolor="#666666">
                <TBODY>
                <TR>
                    <TD width="756" bgcolor="#000000">
                            <span class="style13"><span class="style28">c2008
                                    大連華信計算機新技術培訓中心. すべての知る権利を保留</span> </span>
                    </TD>
                </TR>
                </TBODY>
            </TABLE>
        </TD>
    </TR>
</TABLE>
</BODY>
</HTML>
